import Menu from 'ant-design-vue/es/menu'

const { Item, SubMenu } = Menu

export default {
  name: 'BlogCategory',
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 目录叶子节点点击
     * @param item 当前对象
     * @param key key值
     * @param keyPath 路径
     */
    itemClick({ item, key, keyPath }) {
      this.$store.dispatch('setBlogPageData', { current: 1, size: 6, categoryId: key })
      this.$router.push('/blog/index')
    },
    /**
     * 递归渲染博客大纲
     * @param menu 目录根节点
     * @returns {Array} 返回目录菜单
     */
    renderSubMenu(menu) {
      if (!menu.children) return []
      let resultMenu = []
      for (let i = 0; i < menu.children.length; i++) {
        let menuItem = menu.children[i]
        if (menuItem.children.length === 0) {
          resultMenu.push(<Item {...{ key: menuItem.id }}>
               <span>
                 <a-icon type={menuItem.icon}/>
                 {menuItem.name}
               </span>
          </Item>)

        } else {
          const subMenu = this.renderSubMenu(menuItem)
          resultMenu.push(
            <SubMenu {...{ key: menuItem.id }}>
          <span slot="title">
           <span><a-icon type={menuItem.icon}/>
             {menuItem.name}</span>
          </span>
              {subMenu}
            </SubMenu>
          )
        }
      }
      return resultMenu
    }
  },

  render() {
    let menuTree = ''
    if (this.menu) {
      menuTree = this.renderSubMenu(this.menu)
    }
    const props = {
      mode: 'horizontal'
    }
    const on = {
      click: this.itemClick
    }
    return (
      <div class='categoryMenu'>
        <a-menu mode="horizontal" {...{ props, on: on }}>
          {menuTree}
        </a-menu>
      </div>
    )
  }
}


